<template>
    <div class="article-card" @click="$emit('click', article.id)">
      <div class="card-cover" v-if="article.cover">
        <img :src="article.cover" :alt="article.title">
        <div class="card-category">{{ article.category }}</div>
        <div class="card-actions">
          <button 
            class="action-btn like-btn" 
            :class="{ active: article.isLiked }"
            @click.stop="handleLike"
          >
            <i class="fas" :class="article.isLiked ? 'fa-heart' : 'fa-heart-o'"></i>
            <span>{{ article.likes }}</span>
          </button>
          <button class="action-btn share-btn" @click.stop="handleShare">
            <i class="fas fa-share-alt"></i>
          </button>
        </div>
      </div>
  
      <div class="card-content">
        <h3 class="card-title">{{ article.title }}</h3>
        <p class="card-excerpt">{{ article.excerpt }}</p>
        
        <div class="card-tags">
          <span v-for="tag in article.tags" :key="tag" class="tag">
            {{ tag }}
          </span>
        </div>
  
        <div class="card-meta">
          <div class="author-info">
            <img :src="article.author.avatar" :alt="article.author.name">
            <span class="author-name">{{ article.author.name }}</span>
          </div>
          <div class="article-stats">
            <span class="stat-item">
              <i class="far fa-eye"></i>
              {{ formatNumber(article.views) }}
            </span>
            <span class="stat-item">
              <i class="far fa-comment"></i>
              {{ formatNumber(article.comments) }}
            </span>
            <span class="stat-item">
              <i class="far fa-clock"></i>
              {{ formatDate(article.date) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ArticleCard',
  
    props: {
      article: {
        type: Object,
        required: true
      }
    },
  
    methods: {
      handleLike() {
        this.$emit('like', this.article.id)
      },
  
      handleShare() {
        this.$emit('share', this.article)
      },
  
      formatNumber(num) {
        if (num >= 1000) {
          return (num / 1000).toFixed(1) + 'k'
        }
        return num
      },
  
      formatDate(date) {
        const d = new Date(date)
        const now = new Date()
        const diff = now - d
        
        // 24小时内显示"x小时前"
        if (diff < 86400000) {
          const hours = Math.floor(diff / 3600000)
          return hours === 0 ? '刚刚' : `${hours}小时前`
        }
        
        // 30天内显示"x天前"
        if (diff < 2592000000) {
          return `${Math.floor(diff / 86400000)}天前`
        }
        
        // 否则显示具体日期
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
      }
    }
  }
  </script>
  
  <style>
  /* 文章卡片容器 */
  .article-card {
    width: 100%;
    max-width: 800px; /* 限制最大宽度 */
    margin: 0 auto 24px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
  }
  
  /* 卡片封面图容器 */
  .card-cover {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 的宽高比 */
    overflow: hidden;
  }
  
  /* 封面图样式 */
  .card-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并填充容器 */
    transition: transform 0.3s ease;
  }
  
  /* 卡片内容区域 */
  .card-content {
    padding: 20px;
  }
  
  /* 卡片标题 */
  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  /* 卡片摘要 */
  .card-excerpt {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  
  /* 标签容器 */
  .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  
  /* 标签样式 */
  .tag {
    padding: 4px 12px;
    background: var(--tag-bg);
    color: var(--text-secondary);
    border-radius: 16px;
    font-size: 0.85rem;
  }
  
  /* 文章元信息 */
  .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
  }
  
  /* 作者信息 */
  .author-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .author-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* 文章统计信息 */
  .article-stats {
    display: flex;
    gap: 16px;
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-tertiary);
    font-size: 0.85rem;
  }
  
  /* 悬停效果 */
  .article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .article-card:hover .card-cover img {
    transform: scale(1.05);
  }
  
  /* 响应式布局 */
  @media (max-width: 768px) {
    .article-card {
      max-width: 100%;
      margin: 0 0 16px;
    }
  
    .card-content {
      padding: 16px;
    }
  
    .card-title {
      font-size: 1.1rem;
    }
  
    .article-stats {
      display: none; /* 移动端隐藏统计信息 */
    }
  }
  
  /* 暗色模式适配 */
  .dark-mode .article-card {
    background: var(--bg-dark-secondary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
  
  .dark-mode .article-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  </style>